<!DOCTYPE html>
<html>
{% load staticfiles %}
<link href="{%static "css/bootstrap/bootstrap.min.css" %}" rel="stylesheet" type="text/css" >
<link href="{%static "css/bootstrap/bootstrap-table.css" %}" rel="stylesheet" type="text/css" >
<link href="{%static "css/adstyle.css" %}" rel="stylesheet" type="text/css" />

{% include "header.html" %}
{% include 'menu.html' %}
{% csrf_token %}
<body>
<div class="home">
    <div class="home_right">
        <div class="homepage">
            <div class="ptbt"><a>运维平台</a></div>
            <div class="pagename"><a>主机信息列表</a></div>
            <div class="dangqianweizhi"><a>首页 > CMDB系统 > 数据查询</a></div>
        </div>
        <div class="user_hr">
        </div>
        <div class="user_list">
            <div class="user_list_ls">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        查询条件
                    </div>
                    <div class="panel-body form-group" style="margin-bottom:0px;">
                        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">主机名：</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" name="Name" id="search_name"/>
                        </div>
                        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">IP：</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" name="Name" id="search_ip"/>
                        </div>
                        <div class="col-sm-1 col-sm-offset-2">
                            <button class="btn btn-primary" id="search_btn">查询</button>
                        </div>
                        <div id="toolbar" class="btn-group pull-right" style="margin-right: 5px;">
                             <button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0">
                                 <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
                             </button>
                              <button id="btn_delete" type="button" class="btn btn-default">
                                  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                              </button>
                              <button id="btn_add" type="button" class="btn btn-default">
                                  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a href="/webserver/cmdb/serveradd/" style="color: #333333">新增</a>
                              </button>
                        </div>
                     </div>
                </div>
                <table class="table table-hover" id="table"></table>
                <script src="{%static "js/bootstrap/jquery.min.js" %}"></script>
                <script src="{%static "js/bootstrap/bootstrap.min.js" %}"></script>
                <script src="{%static "js/bootstrap/bootstrap-table.js" %}"></script>
                <script src="{%static "js/bootstrap/bootstrap-table-editable.js" %}"></script>
                <script src="{%static "js/bootstrap/bootstrap-table-zh-CN.js" %}"></script>
                <script type="text/javascript">
                    function initTable() {
                        $('#table').bootstrapTable({
                            method: "post",  //使用get请求到服务器获取数据
                            contentType: "application/x-www-form-urlencoded",//必须要有！！！！
                            dataType: "json",
                            cache: false,
                            url:'{% url 'server_list' %}',
                            toolbar: '#mytab',//指定工具栏
                            striped: true,  //表格显示条纹
                            dataField: "rows",
                            pagination: true, //启动分页
                            pageSize: 10,  //每页显示的记录数
                            pageNumber:1, //当前第几页
                            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
{#                            search: true,  //是否启用查询#}
{#                            showColumns: true,  //显示下拉框勾选要显示的列#}
{#                            showRefresh: true,  //显示刷新按钮#}
                            sidePagination: "server", //表示服务端请求
                            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                            //设置为limit可以获取limit, offset, search, sort, order
                            queryParamsType : "undefined",
                            clickToSelect: true,//是否启用点击选中行
                            toolbarAlign:'left',//工具栏对齐方式
                            buttonsAlign:'left',//按钮对齐方式
                            columns:[
                                {
                                    title:'全选',
                                    field:'select',
                                    //复选框
                                    checkbox:true,
                                    width:25,
                                    align:'center',
                                    valign:'middle'
                                },
                                {
                                    title:'主机名',
                                    field:'hostname',
                                    sortable:true,
                                },
                                {
                                    title:'IP',
                                    field:'IP',
                                    sortable:true
                                },
                                {
                                    title:'内存(G)    ',
                                    field:'Mem',
                                    sortable:true
                                },
                                {
                                    title:'CPU型号',
                                    field:'CPU',
                                    sortable:true
                                },
                                {
                                    title:'CPU线程数',
                                    field:'CPUS',
                                    sortable:true
                                },
                                {
                                    title:'操作系统',
                                    field:'OS',
                                    sortable:true
                                },
                                {
                                    title:'virtual',
                                    field:'virtual1',
                                    sortable:true
                                },
                                {
                                    title:'状态',
                                    field:'status',
                                    sortable:true
                                },
                                {
                                    title:'操作',
                                    field:'id',
                                    align:'center',
                                    //列数据格式化
                                    //formatter:operateFormatter
                                    formatter:function(value,row,serverlist){
                                        var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> ';
                                        var d = '<a href="{% url "server_list"%}'+ row.id +'" mce_href="#" onclick="return delete_sql();">删除</a> ';
                                            return e+d;
                                    }
                                }
                            ],
                            queryParams: function queryParams(params) {   //设置查询参数
                                var param = {
                                    //加上csrf
                                    csrfmiddlewaretoken :$("input[name='csrfmiddlewaretoken']").val(),
                                    pageNumber: params.pageNumber,
                                    pageSize: params.pageSize,
                                    orderNum : $("#orderNum").val()
                                };
                                return param;
                            },

                        });
                    }
                    $(document).ready(function () {
                        //调用函数，初始化表格
                        initTable();

                        //当点击查询按钮的时候执行
                        $("#search").bind("click", initTable);
                    });

                    function delete_sql(){
                        if(confirm("您确定要删除这台主机吗?")){
                            return true;
                        }else{
                            return false;
                        }
                    }

                </script>
            </div>
        </div>
    </div>
</div>
</body>
</html>